<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边框练习</title>
		<!-- 1.画圆形
		 2.画正三角形
		 思路：    html     div元素
		           css      倒角  必须有边框
		  思路2：  html     div元素  #triangle
		          css       斜边
				            不设置宽高
							左边框：50像素 实线红色   transparent
							右边框：50像素实线黄色    transparent
							下边框：50像素实线蓝色   透明度 .3
							颜色值：rgba（）
		 -->
		<style>
			/* 1.画圆 */
			div#circle{
				width:300px;
				height:300px;
				border:4px solid skyblue;
				border-radius: 50%;
				/* 边框阴影属性 box-shadow属性 */
				box-shadow: 5px 5px 50px 10px hotpink inset;
			}
			/* 2.正三角形 */
			div#triangle{
				width: 0;
			/*	border-left: 50px solid transparent;
				border-right: 50px solid transparent;
				border-top:50px solid red;
				border-bottom: 50px solid transparent;*/
			border:50px solid transparent;
			border-top-color: rgba(0,0, 255,.3) ;
			}
			input{
				outline: 1px solid red;
				outline: 0; 
				/* 去掉边框效果 通配选择器中 */
			}
		</style>
		 
	</head>
	<body>
		<div id="circle"></div>
		<div id="triangle"></div>
		文本框：<input type="text">
	</body>
</html>